<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>jquery smartmenu api</title>
	<link type="text/css"  rel="stylesheet" href="jquery.smartmenu.css"/>
	<style type="text/css">
		.inc{
			background: grey;
		}
	</style>
</head>
<body> 
	<div>
		<p style="fontsize:14px;color:blue;"><strong>jquery smartmenu 接口API文档：</strong></p>
		<p>
			<strong>name</strong>&nbsp;&nbsp;<i>""</i>&nbsp;&nbsp;<b>字符串</b>&nbsp;&nbsp;上下文菜单的名称，用以区分不同的上下文菜单。如果页面只有一个上下文菜单，此参数可缺省；如果是多个菜单，此参数必须，否则菜单会出现冲突。 
		</p>
		<p>
			<strong>offsetX</strong>&nbsp;&nbsp;<i>2</i>&nbsp;&nbsp;<b>数值</b>&nbsp;&nbsp;上下文菜单左上角距离鼠标水平偏移距离。
		</p>
		<p> 
			<strong>offsetY</strong>&nbsp;&nbsp;<i>2</i>&nbsp;&nbsp;<b>数值</b>&nbsp;&nbsp;上下文菜单左上角距离鼠标垂直偏移距离。 
		</p>
		<p> 
			<strong>textLimit</strong>&nbsp;&nbsp;<i>6</i>&nbsp;&nbsp;<b>数值</b>&nbsp;&nbsp;上下文菜单项限制显示的文字个数。如果超出会截取，并以…补全，完成文字以title形式显示。
		</p>
		<p>  
			<strong>beforeShow</strong>&nbsp;&nbsp;<i>$.noop</i>&nbsp;&nbsp;<b>函数</b>&nbsp;&nbsp;菜单即将显示之前执行的回调函数。$.noop为jQuery 
			1.4+版本支持，所以，如果你想让插件向下兼容，可设置将插件js中所有的$.noop替换成function(){} 
		</p>
		<p> 
			<strong>afterShow</strong>&nbsp;&nbsp;<i>$.noop</i>&nbsp;&nbsp;<b>函数</b>&nbsp;&nbsp;菜单显示之后执行的回调函数。$.noop为jQuery 1.4+版本支持，所以，如果你想让插件向下兼容，可设置将插件js中所有的$.noop替换成function(){} 
		</p>
	</div>
	<div style="margin:30px;"> 
		<p>示例：</p>
		<p>引入CSS</p> 
		<p class="inc">
			&lt;link type=&quot;text/css&quot; &nbsp;rel=&quot;stylesheet&quot; href=&quot;jquery.smartmenu.css&quot;/&gt;&lt;/style&gt;
		</p>
		<p>引入JS</p>
		<p class="inc">
			&lt;script type=&quot;text/javascript&quot; src=&quot;jquery.js&quot;&gt;&lt;/script&gt;
		</p>
		<p class="inc">
			&lt;script type=&quot;text/javascript&quot; src=&quot;jquery.smartmenu.js&quot;&gt;&lt;/script&gt;&nbsp;
		</p>
		<p>
			<input type="text"/>请右键点击我
		</p>
		<p>JS</p>
		<p>
			&lt;script type=&quot;text/javascript&quot;&gt;
		</p>
		<div class="inc">
			<p>
				<span class="Apple-tab-span" style="white-space:pre">	</span>var option = {
			</p>
			<p>
				<span class="Apple-tab-span" style="white-space:pre">		</span>name : &quot;&quot;,
			</p>
			<p>
				<span class="Apple-tab-span" style="white-space:pre">		</span>offsetX : 2,
			</p>
			<p>
				<span class="Apple-tab-span" style="white-space:pre">		</span>offsetY : 2,
			</p>
			<p>
				<span class="Apple-tab-span" style="white-space:pre">		</span>textLimit : 10,
			</p>
			<p>
				<span class="Apple-tab-span" style="white-space:pre">		</span>beforeShow : $.noop,
			</p>
			<p>
				<span class="Apple-tab-span" style="white-space:pre">		</span>afterShow : $.noop
			</p>
			<p>
				<span class="Apple-tab-span" style="white-space:pre">	</span>};&nbsp;
			</p>
			<p>
				<span class="Apple-tab-span" style="white-space:pre">	</span>var imageMenuData = [ [ {
			</p>
			<p>
				<span class="Apple-tab-span" style="white-space:pre">		</span>text : &quot;删除&quot;,
			</p>
			<p>
				<span class="Apple-tab-span" style="white-space:pre">		</span>func : function() {
			</p>
			<p>
				<span class="Apple-tab-span" style="white-space:pre">			</span>alert(&quot;del&quot;);
			</p>
			<p>
				<span class="Apple-tab-span" style="white-space:pre">		</span>}
			</p>
			<p>
				<span class="Apple-tab-span" style="white-space:pre">	</span>}, {
			</p>
			<p>
				<span class="Apple-tab-span" style="white-space:pre">		</span>text : &quot;重命名&quot;,
			</p>
			<p>
				<span class="Apple-tab-span" style="white-space:pre">		</span>func : function() {
			</p>
			<p>
				<span class="Apple-tab-span" style="white-space:pre">			</span>alert(&quot;rename&quot;);
			</p>
			<p>
				<span class="Apple-tab-span" style="white-space:pre">		</span>}
			</p>
			<p>
				<span class="Apple-tab-span" style="white-space:pre">	</span>} ] ];&nbsp;
			</p>
			<p>
				<span class="Apple-tab-span" style="white-space:pre">	</span>$(&quot;input&quot;).smartMenu(imageMenuData, option); &nbsp;
			</p>
			<p>
				&lt;/script&gt;
			</p> 
		</div>
	</div>
</body>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.smartmenu.js"></script> 
<script type="text/javascript">
	var option = {
		name : "",
		offsetX : 2,
		offsetY : 2,
		textLimit : 10,
		beforeShow : $.noop,
		afterShow : $.noop
	}; 
	var imageMenuData = [ [ {
		text : "删除",
		func : function() {
			alert("del");
		}
	}, {
		text : "重命名",
		func : function() {
			alert("rename");
		}
	} ] ]; 
	$("input").smartMenu(imageMenuData, option);  
</script>
</html>